<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>水位波形图</title>
		<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		
		<link rel="stylesheet" href="../common/css/mui.min.css" />
		<link rel="stylesheet" href="../common/css/common.css" />
		<script src="../common/js/jquery.js"></script>
		<script src="../common/js/echarts.min.js"></script>
		<script type="text/javascript" src="../pc/js/echarts-gl.min.js"></script>
		<script type="text/javascript" src="../common/js/layer/layer.js"></script>
		<script src="../common/js/jquery.method.js"></script>
		<script type="text/javascript" src="../common/js/laydate/laydate.js"></script>
		<script src="../js/common.js"></script>
		<style>
			.chart{
				width: 100%;
				height: 400px;
			}
			.btn{
				background: #041E68;
				color: #fff;
				font-size: 14px;
				cursor: pointer;
				padding: 8px 12px;
				border-radius: 5px;
			}
		</style>
	</head>
	<body class="fabu" style="background: #fff;">
		<!--<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">水位监控图</h1>
		</header>-->
		<div class="middle-content" style="margin-top:0;">
			<!-- 内容start -->
			<div class="header">
				<div class="header-left">
					<a class="sb-back2" href="#" onclick="backTo()" title="返回"></a>
				</div>
				<div class="header-middle">水位波形图</div>
			</div>
			<div style="height:50px;width: 100%;"></div>
			
		</div>
		<div class="mui-content">
				<div class="mui-content-padded">
					<p>选择日期:&nbsp;&nbsp;<input type="text" class="demo-input" id="test1" style="display: inline-block;width: 60%;height: 35px;    vertical-align: baseline;">&nbsp;&nbsp; <button class="btn btn_search">查询</button></p>
					<div class="chart" id="moniterChart"></div>
				</div>
		</div>
	</body>
	<script type="text/javascript">
	//执行一个laydate实例
		laydate.render({
		  elem: '#test1' //指定元素
		});
		
		$(function(){
			lineData();
			$(document).on("click",".btn_search",function(){
				lineData();
			});
		});
		function lineData(){
			var id=localStorage.getItem("id");
			$.ajax({
				url: "http://"+remote_ip+":"+remote_port+"/"+remote_name+"/app/screen/show/deviceByHour", //路径 
				data:{
					"id":id,
					"day":$("#test1").val()
				},
				dataType: "json",	
				type: 'POST',
				success: function(data) { //返回数据根据结果进行相应的处理  
					if(data){
                   		drawWeekData(data,"moniterChart");
                	}
				},
				error: function(XMLHttpRequest, textStatus, errorThrown) {
					$.msg("数据获取失败!");
				}
			});	
		}
	function drawWeekData(data,containerId){
		  var myChart = echarts.init(document.getElementById(containerId), 'macarons');
        option = {
           
            tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            grid: {
            top:'10%',
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
        },
            xAxis: {
                axisTick: {
                    show: false,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:'#000',
                        width:2
                    }
                },
                axisLabel:{
                    color:'#000'
                },
                splitLine:{
                    show:false
                },
                type: 'category',
                boundaryGap: true,
                data: ['0','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15','16', '17', '18', '19', '20', '21','22','23'],
            },
            yAxis: {
                axisTick: {
                    show: true,
                    inside:true
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:'#000',
                        width:2
                    }
                },
                axisLabel:{
                    color:'#000'
                },
                splitLine:{
                    show:false
                },
                type: 'value'
            },
           series:function(){
            var series=[];
            for(var result in data){
                var item={
                    name:result.split("|||")[1],
                    type:'line',
                    smooth:true,
                    data:function(){
                       return data[result];
                    }(),
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                }
                series.push(item);
            }
               return series;
           }()
        };

        myChart.setOption(option,true);
}

	</script>
</html>
